<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.global.js"></script>
</head>

<body>
    <div id="app">
        <!-- 指令给普通元素使用 -->
        <!-- <p v-color:bg="showColor" >count:{{count}}</p>
        <p v-color:font="showColor">count:{{count}}</p>
        <p v-color:border="showColor">count:{{count}}</p> -->

        <lw-a v-color:bg="showColor"></lw-a>
        <hr>
        <p>
            showColor:{{showColor}}
        </p>
        <button @click="showColor='blue'">change</button>


    </div>
</body>
<script>

    /* 
        什么叫做指令?  v-if  v-show v-for v-bind 

        
        指令: 指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM

            a. 指令 (Directives) 是带有 v- 前缀的特殊 attribute(属性 => html属性,写在标签<>以内,作为标签内的属性)
            b. 指令 attribute 的值预期是单个 JavaScript 表达式 (可以是变量 表达式 方法 三目运算符),指令值一般会被""包裹,但是不意味着指令值一定是字符串
            c. 指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM (操作DOM => 修改内容 修改属性 修改样式  绑定事件  元素增删改)

        指令的常见用法: 
            v-指令名称           
                部分指令不需要指令值   v-pre  v-once

            v-指令名称 = "指令值"   
                如: v-html  v-text  v-if  v-else  v-else-if  v-show

            v-指令名称:参数 = "指令值"
                如: v-on:click  v-bind:class    v-model:xxx

            v-指令名称:参数.修饰符 = "指令值"
                如: v-on:click.stop  v-model.lazy
    
    
        自定义指令:
            一个自定义指令由一个包含类似组件生命周期钩子的对象来定义。钩子函数会接收到指令所绑定元素作为其参数

        全局指令
            app.directive("name",option)
                name 指令名称(不会要加v-  => 官方默认追加)
                option  指令的配置对象

    
    */


    var { createApp } = Vue;

    let lwA = {
        template: `<div>
            <p>11111</p>
        </div>`,
    }

    var app = createApp({
        data() {
            return {
                count: 1,
                showColor: "red",
            }
        },
        components: {
            lwA,
        }
    })

    // v-color
    /* app.directive("color",{
        mounted (el,binding,vnode,prevVnode) {
            console.log("el",el);
            console.log("binding",binding);
            console.log("vnode",vnode);
            console.log("prevVnode",prevVnode);

            let {arg,value} = binding;
            switch(arg){
                case "bg":
                    el.style.backgroundColor = value;
                    break;
                case "font":
                    el.style.color = value;
                    break;
                case "border":
                    el.style.borderColor = value;
                    break;
            }
        },
        updated (el,binding,vnode,prevVnode) {
            console.log("el",el);
            console.log("binding",binding);
            console.log("vnode",vnode);
            console.log("prevVnode",prevVnode);

            let {arg,value} = binding;
            switch(arg){
                case "bg":
                    el.style.backgroundColor = value;
                    break;
                case "font":
                    el.style.color = value;
                    break;
                case "border":
                    el.style.borderColor = value;
                    break;
            }
        }
    }) */

    // 如果指令的配置项是一个函数, 该函数默认作为指令的钩子函数,在mounted和updated阶段触发
    app.directive("color", function (el, binding, vnode, prevVnode) {
        console.log("el", el);
        console.log("binding", binding);
        console.log("vnode", vnode);
        console.log("prevVnode", prevVnode);

        let { arg, value } = binding;
        switch (arg) {
            case "bg":
                el.style.backgroundColor = value;
                break;
            case "font":
                el.style.color = value;
                break;
            case "border":
                el.style.borderColor = value;
                break;
        }
    })



    app.mount("#app");



</script>

</html>